﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>访客登记</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <link href="~/Content/miniMobile/css/miniMobile.css" rel="stylesheet" />
    <script src="~/Content/miniMobile/js/zepto.min.js"></script>
    <script src="~/Content/miniMobile/js/miniMobile.js"></script>
    <link href="~/Content/miniMobile/plugins/mobileSelect/mobileSelect.css" rel="stylesheet" />
    <script src="~/Content/miniMobile/plugins/mobileSelect/mobileSelect.js"></script>
    <script src="~/Content/miniMobile/plugins/icheck/icheck.js"></script>
    <link href="~/Content/miniMobile/plugins/noUiSlider.10.0.0/nouislider.css" rel="stylesheet" />
    <script src="~/Content/miniMobile/plugins/noUiSlider.10.0.0/nouislider.js"></script>
    <link href="~/Content/miniMobile/plugins/fonticon/iconfont.css" rel="stylesheet" />
    <script src="~/Content/layer/layer.js"></script>
</head>
<body class="pb12 fadeIn animated">
    <header class="formheader w75 h11 f30 color8 bg-color-primary"></header>
    <style>
        .formheader {
            line-height: 0.7rem;
        }

            .formheader span {
                display: inline-block;
            }

            .formheader input {
                border: none;
            }
    </style>
    <div class="p3 f30 f30 w75" style="padding-top:1.2rem">
        <form>
            <div class="pt2 pb2">
                受访部门:
                <div id="selectBox" class="form-control w57 h7" style="width:5.1rem;display: inline-block; background: url(../../Content/miniMobile/img/select.png) center right no-repeat; background-size:auto 100%;">
                </div>
            </div>
            <div class="pt2 pb2">
                受访人名:
                <input type="text" class="w57  form-control" style="width:5.1rem;" placeholder="输入受访人名" id="OwnerName" />
            </div>
            <div class="pt2 pb2">
                访客公司:
                <input type="text" class="w57  form-control" style="width:5.1rem;" placeholder="输入访客公司" id="Company" />
            </div>
            <div class="pt2 pb2">
                访客名称:
                <input type="text" class="w57  form-control" style="width:5.1rem;" placeholder="输入访客名称" id="Name" />
            </div>

            <div class="pt2 pb2">
                访客电话:
                <input type="text" class="w57  form-control" style="width:5.1rem;" placeholder="输入访客电话" id="PhoneNum" />
            </div>
            <div class="pt2 pb2">
                结束日期:
                <input type="date" class="w57  form-control" style="width:5.1rem;" id="EndDate" value="@DateTime.Now.AddDays(3).ToString("yyyy-MM-dd")" />
            </div>
            <div class="pt2 pb2 blue js_uploadBox" style="position:relative;">
                访客头像:
                <div class="btn-upload">
                    <a href="javascript:void(0);"><i class="icon-upload"></i><span class="js_uploadText">上传</span>图片</a>
                    <input class="js_upFile" type="file" name="cover">
                </div>

                <div class="js_showBox "><img class="js_logoBox" id="HeadUrl" src="" width="100px"></div>

            </div>
            <div class="mt4 mb4">
                备注：
                <textarea class="w59 h20 form-control" placeholder="备注内容" id="Remark"></textarea>
            </div>
            <div class="t-c mt5">
                <span class="w18 h7 btn radius5 btn-primary" onclick="fnSave()">提交表单</span>
            </div>
            <input type="hidden" id="DepartId" />
            <input type="hidden" id="DepartName" />
            <input type="hidden" id="Id" value="@Guid.Empty" />
        </form>
    </div>
    <script src="~/Content/miniMobile/js/jquery.uploadView.js"></script>
    <script type="text/javascript">
        var addressArr=[];
        var obj = '@Url.Action("SaveHeadImg", "Visitor")';
        var array = eval(obj)
        console.log(array)
        for (var i = 0; i < array.length; i++) {

            addressArr.push({ id: array[i].Id, value: array[i].Name })
        }
        var mobileSelect1 = new MobileSelect({
            trigger: '#selectBox',
            title: '单项选择',
            wheels: [{
                data: addressArr
            }],
            position: [0], //初始化定位 打开时默认选中的哪个 如果不填默认为0
            callback: function (indexArr, data) {
                $("#DepartId").val(data[0].id)
                $("#DepartName").val(data[0].value)
            }
        });
        $(".js_upFile").uploadView({
            uploadBox: '.js_uploadBox',//设置上传框容器
            showBox: '.js_showBox',//设置显示预览图片的容器
            width: 100, //预览图片的宽度，单位px
            height: 100, //预览图片的高度，单位px
            allowType: ["gif", "jpeg", "jpg", "bmp", "png"], //允许上传图片的类型
            maxSize: 10, //允许上传图片的最大尺寸，单位M
            success: function (e) {
                $.post("@Url.Action("SaveHeadImg", "Visitor")", { base64: e }, function (result) {
                if (result.state == 1) {
                    $("#HeadUrl").attr("src", result.data);
                }
            })
            }
        });
        function fnSave() {
        $.post('@Url.Action("SaveVisitor", "Visitor")', queryParams(), function (result) {
            if (result.state == 1) {
                layer.msg('操作成功');
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index)
                parent.$("#table").bootstrapTable('refresh');
            }
            else {
                layer.msg(result.message);
            }
        })
    }
        function queryParams() {
            return {
                DepartId: $("#DepartId").val(),
                DepartName: $("#DepartName").val(),
                OwnerName: $("#OwnerName").val(),
                Company: $("#Company").val(),
                Name: $("#Name").val(),
                PhoneNum: $("#PhoneNum").val(),
                HeadUrl: $("#HeadUrl").attr("src"),
                Remark: $("#Remark").val(),
                EndDate: $("#EndDate").val(),
                Id: $("#Id").val()
            };
        }
    </script>
</body>


</html>
